<template>
    <div id="header">
        <el-header>
        <router-link :to="{name:'Index'}">
            <img id="logo" src="https://cdn.firstfilm.org.cn/wp-content/themes/first/assets/images/2020/2020-logo-2.png" >
        </router-link>
        <div id="menu">
            <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="/">首页</el-menu-item>
                <el-menu-item index="/officialInformation">官方资讯</el-menu-item>
                <el-menu-item index="/activity">影展活动</el-menu-item>
             </el-menu>
        </div>
        <div id="account">
            <router-link  v-show="showLogin" :to="{name:'Login'}">
                <i class="el-icon-user"></i>
                登录/
            </router-link>

            <router-link  v-show="showLogin" :to="{name:'Register'}">
                <i class="el-icon-document"></i>
                注册</router-link>

            <label>
                {{user.name}}
            </label>
            <router-link  v-show="!showLogin" :to="{name:'User'}">
                <i class="el-icon-user"></i>
                个人中心
            </router-link>
            </div>
        </el-header>
    </div>
</template>

<script>
    export default {
        name: "Header.vue",
        data(){
            return {
                showLogin:true,
                activeIndex: '/',
                user:{}
            }

        },
        methods:{
            checkIsUser(){
                let path = this.$route.path;
                let  userInfo  = sessionStorage.getItem('username')


                if(path === '/login'|| path==='/register' ){
                    this.showLogin = false
                }else {
                    this.activeIndex = path
                }
                if (userInfo != null && userInfo !== ''){
                    this.showLogin = false
                    this.user = JSON.parse(userInfo)
                }
                if(this.$route.query.msg === "loginSuccess"){
                    console.log(this.$route.query.user)
                    this.user = this.$route.query.user
                    this.$route.query.msg = {}
                    console.log("==========")
                }
            },
            handleSelect(){

            }
        },
        watch:{
        },
        mounted() {
            this.checkIsUser()
        },

    }
</script>
<style>
    a {
        text-decoration: none;
        color: black;
    }
</style>
<style scoped>
    #header{
        display: inline-block;
        height: 7vw;
        z-index: 99999;
        overflow: hidden;
    }
    #logo {
        width: 20vw;
        left: 0;
        position: absolute;
    }
    #menu {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    #account{
        right: 10px;
        width: 15vw;
        height: 7vw;
        line-height: 7vw;
        position: absolute;

    }

    a:hover {
        color: dodgerblue;
    }
</style>
